import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, Input, Select } from 'antd';
import { useEffect, useState } from 'react';
import { orderFilterItem } from '../../constant';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import { SelectBatchInput } from '../SelectBatchInput';
import SearchAddress from './SearchAddress';
import AreaSelect from '@/components/AreaSelect';

const { Panel } = Collapse;
const { Option } = Select;
/**
 * @desc: 筛选框：订单号组件
 */
export const OrderSn = ({value, onChange, childrenNode, stageParams, onPressEnter, ...args}) => {
  const [selectStoreType, setSelectStoreType] = useState('1'); //店铺订单号/分销单号切换

  const [selectType, setSelectType] = useState('1'); //奇门外部erp单号/直发分销单号切换
  const [selectAreaType, setSelectAreaType] = useState('provinceIdArr'); //省市区/详细地址切换

  const [selectProvince, setSelectProvince] = useState('1'); //省市区/详细地址切换

  const {checkingMap} = useFilterFieldsConfig();
  useEffect(() => {
    const renderKeys = [];
    Object.entries(checkingMap).forEach(([key, checked]) => {
      if (checked && Object.values(orderFilterItem).includes(key)) {
        renderKeys.push(key);
      }
    });
  }, [checkingMap]);

  useEffect(()=>{
   console.log(value);
  }, [value])

  // const orderIdOptions = [

  //   { label: '分销单号', value: 'tcOrderId' },
  // ];
  useEffect(() => {
    // 数据回显
    if (value.provinceIdArr && value.provinceIdArr.length) {
      setSelectAreaType('provinceIdArr');
    }
    if (value.cityIdArr && value.cityIdArr.length) {
      setSelectAreaType('cityIdArr');
    }
    if (value.districtIdArr && value.districtIdArr.length) {
      setSelectAreaType('districtIdArr');
    }
  }, [value]);

  const qmErpSnOptions = [
    {label: '店铺订单号', value: 'outOrderSnArr'},
    // {label: '奇门外部erp单号', value: 'qmErpSnArr'},
    // {label: '直发分销单号', value: 'tcOrderIdArr'},
  ];

  const qmErpSnArrOptions = [
    {label: '外部erp单号', value: 'qmErpSnArr'},
    {label: '外部源单号', value: 'sourceOrderNoArr'},
    {label: '分销单号', value: 'tcOrderIdArr'},
  ]

  const triggerChange = (changedValue) => {
    onChange?.({...value, ...changedValue});
  };

  const onInputChange = (key, value) => {
    triggerChange({[key]: value});
  };

  if(Object.values(orderFilterItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }


  return (
      <Collapse
          bordered={false}
          defaultActiveKey={['orderSn']}
          expandIcon={({isActive}) => <DoubleLeftOutlined rotate={isActive ? 270 : 90}
                                                          style={{fontSize: '16px', color: '#4E5969'}}/>}
          expandIconPosition="end"
      >
        <Panel header={<div>订单号</div>} key="orderSn" collapsible="disabled" showArrow={false}>
          {childrenNode.map((item, index) => {
            if (item.field === 'snArr' && checkingMap.snArr) {
              return (
                  <SelectBatchInput
											key='snArr'
                      value={value}
                      defaultSelectValue="snArr"
                      placeholder="系统订单号，多个逗号隔开"
                      onChange={(v) => {
                        triggerChange(v);
                      }}
                      onPressEnter={onPressEnter}
                  ></SelectBatchInput>
              )
            }

            {/** 店铺订单号/奇门外部erp单号/直发分销单号 */
            }
            if (item.field === 'outOrderSnArr' && checkingMap.outOrderSnArr) {
              return (
                  <SelectBatchInput
                      key='outOrderSnArr'
                      value={value}
                      options={qmErpSnOptions}
                      defaultSelectValue="outOrderSnArr"
                      onChange={(v) => {
                        triggerChange(v);
                      }}
                      onPressEnter={onPressEnter}
                  ></SelectBatchInput>
              )
            }

            if(item.field === 'qmErpSnArr' && checkingMap.qmErpSnArr) {
              return (
                  <SelectBatchInput
                    key='qmErpSnArr'
                    value={value}
                    options={qmErpSnArrOptions}
                    defaultSelectValue="qmErpSnArr"
                    onChange={(v) => {
                      triggerChange(v);
                    }}
                    onPressEnter={onPressEnter}
                ></SelectBatchInput>
              )
            }

            {/** 省市区/详细地址 */
            }
            if (item.field === 'provinceIdArr' && checkingMap.provinceIdArr) {
              const handleChange = (areaIds, treeData) => {
                // stageParams.current.areaTreeData = treeData;
                triggerChange({provinceIdArr: treeData})
              }
              return <FieldWrapper label='省市区' key='provinceIdArr'>
                <AreaSelect handleChange={handleChange} initSelectData={value?.provinceIdArr || []} />
              </FieldWrapper>
              return (
                  <FieldWrapper
											key={index}
                      label={
                        <Select
                            value={selectAreaType}
                            style={{flex: '0, 0 60px'}}
                            options={[
                              {label: '省', value: 'provinceIdArr'},
                              {label: '市', value: 'cityIdArr'},
                              {label: '区', value: 'districtIdArr'},
                            ]}
                            dropdownMatchSelectWidth={false}
                            onChange={(e) => {
                              triggerChange({
                                provinceIdArr: [],
                                cityIdArr: [],
                                districtIdArr: [],
                              });
                              setSelectAreaType(e);
                            }}
                        ></Select>
                      }
                  >
                    <SearchAddress
                        type={selectAreaType}
                        style={{width: '100%'}}
                        value={value[selectAreaType]}
                        onChange={(data) => {
                          triggerChange({
                            provinceIdArr: [],
                            cityIdArr: [],
                            districtIdArr: [],
                            [selectAreaType]: data,
                          });
                        }}
                    />
                  </FieldWrapper>
              )
            }

            {/** 快递单号/买家账号/手机号 */
            }
            if (item.field === 'logisticsNoArr' && checkingMap.logisticsNoArr) {
              return (
                  <SelectBatchInput
											key='logisticsNoArr'
                      value={value}
                      defaultSelectValue="logisticsNoArr"
                      placeholder="快递单号，多个逗号隔开"
                      onChange={(v) => {
                        triggerChange(v);
                      }}
                      onPressEnter={onPressEnter}
                  ></SelectBatchInput>
              )
            }

            if (item.field === 'buyerAccount' && checkingMap.buyerAccount) {
              return (
                  <FieldWrapper key='buyerAccount'>
                    <Input value={value.buyerAccount} placeholder="请输入买家账号" allowClear
                      onChange={(e) => onInputChange('buyerAccount', e.target.value)}
                      onPressEnter={onPressEnter}
                    />
                  </FieldWrapper>
              )
            }

            if (item.field === 'phone' && checkingMap.phone) {
              return (
                  <FieldWrapper key='phone'>
                    <Input value={value.phone} placeholder="请输入手机号" allowClear
                      onChange={(e) => onInputChange('phone', e.target.value)}
                      onPressEnter={onPressEnter}
                    />
                  </FieldWrapper>
              )
            }

          })}

        </Panel>
      </Collapse>
  );
};

export default OrderSn;
